<template>
  <div class="page-wrapper">
    <div class="header-holder">
      <div class="header-box flex-row-space-between">
        <div class="logo-box" @click="goToHome">
          <img src="~assets/img/tmp/logo.png" />
        </div>
        <div class="search-box flex-row-v-center">
          <input class="input flex-1" v-model="title" placeholder="搜索账号"/>
          <div class="search-btn flex-center" @click="onClickSearch">
            <img src="~assets/img/icon-search.png">
          </div>
        </div>
      </div>
    </div>
    <Nuxt />
    <div class="footer-box flex-center">
      Copyright © 2020 www.zlds.com  梓良代售 版权所有
    </div>
  </div>
</template>

<script>
import Core from '@/core/core'
export default {
  data() {
    return {
      title: ''
    }
  },
  methods: {
    goToHome() {
      window.open(Core.Const.NET.END_POINT_HOME_WEB, '_blank')
    },
    onClickSearch() {
      this.$router.push("/account-on-sale?title=" + this.title.trim())
    }
  }
}
</script>
<style lang="scss">
html {
  font-family: "PingFang SC","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  background: rgb(245, 245, 245);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

.page-wrapper {
  background: rgb(245, 245, 245);
  position: relative;
}

.header-holder {
  width: 100%;
  height: 66px;
  background: #ffffff;
  .header-box {
    width: 1200px;
    height: 66px;
    margin: auto;
    .logo-box {
      cursor: pointer;
      img {
        height: 40px;
      }
    }
    .search-box {
      background: #EEEEEF;
      border-radius: 20px;
      width: 450px;
      height: 40px;
      padding: 4px;
      .input {
        padding: 0 12px;
        font-size: 14px;
        color: #8D9197;
        border: none;
        background: transparent;
        height: 100%;
        outline: none;
      }
      .search-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;

        img {
          width: 32px;
          height: 32px;
        }
      }
    }
  }
}

.footer-box {
  padding: 48px 0;
  font-size: 12px;
  color: #3A3D41;
  line-height: 17px;
}
</style>
